{% extends "base.html" %}

{% block title %}潜水课程 - 万岛潜水{% endblock %}

{% block content %}
<div class="container">
    <h1 class="text-center mb-5">潜水课程</h1>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <p class="lead text-center mb-0">无论您是初次尝试潜水，还是希望提升潜水技能，我们都能为您提供专业的课程和服务。</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-5">
        {% for course in courses %}
        <div class="col-md-6 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{ url_for('static', filename='uploads/' + course.image) }}" class="img-fluid rounded-start h-100" style="object-fit: cover;" alt="{{ course.name }}">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">{{ course.name }}</h5>
                            <p class="card-text">{{ course.description|truncate(150) }}</p>
                            <p class="card-text">
                                <small class="text-muted">类型: {{ course.type }}</small><br>
                                <small class="text-muted">时长: {{ course.duration }}</small><br>
                                <strong class="text-primary">价格: ¥{{ course.price }}</strong>
                            </p>
                            <a href="{{ url_for('main.course_detail', id=course.id) }}" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <div class="row mb-5">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body">
                    <h3 class="card-title text-center">常见问题</h3>
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    参加体验潜水需要会游泳吗？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    参加体验潜水最好会游泳，但不是必须的。我们的教练会全程一对一指导，确保您的安全。不过，如果您想考取潜水证书，则必须会游泳。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    有哪些健康限制条件？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    某些健康状况可能不适合潜水，如心脏病、哮喘、癫痫、高血压等。孕妇也不适合潜水。如果您有任何健康问题，请在预约前咨询医生，并告知我们的工作人员。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    需要自带装备吗？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    所有课程都包含全套潜水装备的租赁，您只需要带泳衣和毛巾即可。当然，如果您有自己的装备，也可以带来使用。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    考取潜水证书需要多长时间？
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    入门级的开放水域潜水员课程通常需要3-5天完成，包括理论学习和实践训练。进阶课程则需要5-7天。具体时间可能因个人学习进度而有所不同。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFive">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    潜水证书是终身有效的吗？
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    是的，我们提供的国际潜水证书是终身有效的。不过，如果您长时间没有潜水（通常超过6个月），建议参加复习课程，重新熟悉潜水技能和安全知识。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body text-center p-4">
                    <h3 class="card-title">准备好开始您的潜水之旅了吗？</h3>
                    <p class="card-text">立即预约，探索海底世界的奇妙！</p>
                    <a href="{{ url_for('main.contact') }}" class="btn btn-light btn-lg">联系我们</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 